<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="{{ url_for('static', filename='Home.CSS') }}">
        <!-- <link rel="stylesheet" href="{{ url_for('static', filename='Home.CSS') }}"> -->

		<link rel="stylesheet" href="{{ url_for('static', filename='CodeMirror/lib/codemirror.css') }}"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='CodeMirror/theme/idea.css') }}">
        <script src="../static/CodeMirror/lib/codemirror.js"></script>
        <script src="../static/CodeMirror/mode/clike/clike.js"></script>
        <script src="../static/jquery-3.4.1.min.js"></script>
        <script src="../static/CodeMirror/mode/python/python.js"></script>        
        <title>{{ name }}</title>
    </head>

    <body>

        <header>
            <nav>
                <ul>
                    <!--
                    <li><a href="index.html">首页</a></li>
                    <li><a href="QuestionBank.html">题库</a></li>
                    <li><a href="Competition.html">比赛</a></li>
                    <li><a href="Release.html">我要发布</a></li>
                    <div>
                        <li><a href="login.html">登录/注册</a></li>
                    </div>
                    -->
                    <li><a href="{{ url_for('homepage') }}">首页</a></li>
                    <li><a href="{{ url_for('questions') }}">题库</a></li>
                    <li><a href="{{ url_for('competition') }}">比赛</a></li>
                    <li><a href="{{ url_for('release') }}">我要发布</a></li>
                    <div>
                        <li><a href="{{ url_for('login') }}">登录/注册</a></li>
                    </div>
                    <!--python-->
                </ul>
                <div class="spe">
                    <ul>
                        <li><img src="{{ url_for('static', filename='./img/mark.png') }}" width="80px" height=80px" alt="logo"></li>
                        <li><h1>解答</h1></li>
                    </ul>
                </div>
            </nav>
        </header>
   

    <section class="Answer">
        <div class="left">
			{{ context }}
		</div>
		<div class="right">
            <!-- 下拉选，文本域， -->
            <form action="{{ url_for('checkanswer', name=name) }}" method="POST">
                <p style="margin-left:15px">代码编辑区</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择语言：</p>
                <select name="languages" id="languages"> 
                    <option value="C/C++">C/C++</option>
                    <option value="Java">Java</option>
                    <option value="Python">Python</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" id="submit" value="提交"/>
                <input type="reset" id="reset" value="重置" >
                <br/>
				<textarea name="codeArea" id="codeArea" rows="20" rols="30"></textarea>
                
            </form>
		</div>
    </section>
    <footer>
        Welcome to contact us with <a href="https://github.com/VisualGMQ" target="view-window">https://github.com/VisualGMQ</a>
    </footer>

    <script type="text/javascript">
        //CodeMirror实例
		var myText = document.getElementById('codeArea');
		var editor = CodeMirror.fromTextArea(myText,{
			mode:"text/x-c++",
			lineNumbers:true,
			theme:"idea",
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            lineWrapping: true,
            matchBrackets: true
        });
        editor.setSize('auto','600px');

        //下拉框实现选择不同的语言模式
        $('#languages').change(function(){
            var lang = $('#languages option:selected').text();
            if(lang == "C/C++"){
                editor.refresh();
                editor.setOption("mode","text/x-c++");
            }else if(lang == "Java"){
                editor.refresh();
                editor.setOption("mode","text/x-java");
            }else if(lang == "Python"){
                editor.refresh();
                editor.setOption("mode","text/x-python");
            }
        });
        $('#reset').click(function(){
            editor.setValue("");
        });

        window.onload =  function(){
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    window.alert(messages[0]);
                {% endif %}
            {% endwith %}
        }
	</script>
    </body>
</html>